<template>
	<view class="container" v-if="dataList.status == 101 || dataList.status == 105">
		<view class="u-flex u-flex-items-center u-flex-center payment_status">
			<uni-icons size="40" color="#04C160" custom-prefix="iconfont" type="icon-zhifuchenggong" v-if="dataList.status==101"></uni-icons>
			<uni-icons size="40" color="#F26809" custom-prefix="iconfont" type="icon-tuikuan" v-if="dataList.status==105"></uni-icons>
			<text :class="['status Medium',dataList.status==105?'status_refund':'']">
				{{dataList.status==105?"全额退款":"支付成功"}}
			</text>
		</view>
		<view class="payment_money u-flex u-flex-items-start u-flex-center">
			<view class="symbol Medium">¥</view>
			<view class="rmb Medium">{{dataList.orderMoney}}</view>
		</view>
		<!-- 支付成功 101,全额退款105-->
		<view class="payment_list">
			<view class="list u-flex u-flex-items-start u-flex-start">
				<view class="list_label">订单状态</view>
				<view class="list_text">{{dataList.status==101?'支付成功':dataList.status==105?'全额退款':''}}</view>
			</view>
			<view v-if="dataList.paymentTime" class="list u-flex u-flex-items-start u-flex-start">
				<view class="list_label">支付时间</view>
				<view class="list_text">{{dataList.paymentTime}}</view>
			</view>
			<view class="list u-flex u-flex-items-start u-flex-start">
				<view class="list_label">收款方式</view>
				<view v-if="dataList.paymentMethod==100" class="list_text">聚合订单码</view>
				<view v-if="dataList.paymentMethod==101" class="list_text">银行转账支付</view>
				<view v-if="dataList.paymentMethod==103" class="list_text">博美祺POS</view>
			</view>
			<view class="list u-flex u-flex-items-start u-flex-start">
				<view class="list_label">订单编号</view>
				<view class="list_text">{{dataList.orderNo}}</view>
			</view>
			<view v-if="dataList.paymentMethod==103" class="list u-flex u-flex-items-start u-flex-start">
				<view class="list_label">参考号</view>
				<view class="list_text">{{dataList.referenceId}}</view>
			</view>
			<view v-else class="list u-flex u-flex-items-start u-flex-start">
				<view class="list_label">渠道单号</view>
				<view class="list_text">{{dataList.channelReceiptNo}}</view>
			</view>
			<view class="list u-flex u-flex-items-start u-flex-start">
				<view class="list_label">收款商户</view>
				<view class="list_text">{{dataList.merchantName}}</view>
			</view>
		</view>
		<view class="payment_list collection">
			<view class="list u-flex u-flex-items-start u-flex-start">
				<view class="list_label">收款类型</view>
				<view class="list_text">{{dataList.type==101?'收顾客款':'收店家款'}}</view>
			</view>
			<view class="list u-flex u-flex-items-start u-flex-start" v-if="dataList.type==101">
				<view class="list_label">活动名称</view>
				<view class="list_text">{{dataList.storeName}}</view>
			</view>
			<view class="list u-flex u-flex-items-start u-flex-start" v-if="dataList.type==101">
				<view class="list_label">顾客名称</view>
				<view class="list_text">{{dataList.customerName}}</view>
			</view>
			<view class="list u-flex u-flex-items-start u-flex-start" v-if="dataList.type==102">
				<view class="list_label">店面名称</view>
				<view class="list_text">{{dataList.storeName}}</view>
			</view>
		</view>
		<view class="details_btn" v-if="dataList.status==101">
			<u-button :hairline="false" color="#F2F2F2" class="Medium" :customStyle="{width:'334rpx',height:'88rpx',fontSize:'32rpx',borderRadius:'8rpx',color:'#F26809'}" @click="confirmInfoOpen">申请退款</u-button>
		</view>
		<view class="u-flex u-flex-center">
			<view class="save_album" @click="createCanvas">保存到相册</view>
		</view>
		<u-gap height="40"></u-gap>
		<!-- 图片弹框 -->
		<u-popup :show="canvasImgShow" mode="center" :safeAreaInsetBottom="false" :customStyle="{borderRadius:'16rpx'}" @close="canvasImgClose">
			<view style="position: relative;">
				<u--image :src="canvasImg" :width="canvasW" :height="canvasH" radius="8"></u--image>
				<u-button v-if="showDownload" :hairline="false" color="#FFFFFF" class="Medium" :customStyle="{position:'absulote',bottom:'80rpx',zIndex:'10',width:'320rpx',height:'80rpx',fontSize:'32rpx',borderRadius:'8rpx',color:'#4179FF',backgroundColor:'#F2F2F2'}" @click="getImg">
					下载收款凭证
				</u-button>
			</view>
		</u-popup>
		<!-- 确认退款弹框 -->
		<u-popup :show="confirmInfoShow" mode="center" :safeAreaInsetBottom="false" :customStyle="{borderRadius:'16rpx'}">
			<view class="confirm_info">
				<view class="confirm_content">
					<view class="info_title Medium">确认退款</view>
					<view class="tips">
						退款后金额将原路返回至付款账户，是否确认退款？
					</view>
				</view>
				<u-line color="#dddddd"></u-line>
				<view class="u-flex u-flex-items-center">
					<u-button :hairline="false" color="#FFFFFF" class="Medium" :customStyle="{width:'50%',height:'88rpx',fontSize:'32rpx',borderRadius:'12rpx',color:'#999999'}" @click="confirmInfoClose">
						取消
					</u-button>
					<u-line color="#dddddd" direction="col" length="60rpx"></u-line>
					<u-button :hairline="false" color="#FFFFFF" class="Medium" :customStyle="{width:'50%',height:'88rpx',fontSize:'32rpx',borderRadius:'12rpx',color:'#4179FF'}" @click="confirm">
						确定
					</u-button>
				</view>
			</view>
		</u-popup>
		<canvas class="fan_canvas" canvas-id="myCanvas"></canvas>
	</view>
</template>

<script>
	import _canvas from '@/uni_modules/fan-canvas/canvasUtils';
	import { saveImg, qrcodeCanvas } from '@/uni_modules/fan-canvas/plugins/utils';
	import webviewJs from '@/common/webview.js';
	import {
		getOrderDetail,
		initiateRefund,
		checkOrderIsRefund
	} from '@/config/api.js';
	let interval = null;
	export default {
		data() {
			return {
				showDownload: false, //是否是APP端进入
				orderNo: '', //订单id
				confirmInfoShow: false, //确认弹框是否显示
				canvasImgShow: false, //保存的画布图片是否显示
				dataList: {},
				canvasImg: '', //画布生成的图片
				canvasW: 0, //画布生成的图片宽度
				canvasH: 0, //画布生成的图片高度
			};
		},
		onLoad(options) {
			let that = this;
			let ua = window.navigator.userAgent.toLowerCase();
			console.log(ua);
			that.orderNo = options && options.orderNo ? options.orderNo : '';
			that.getData();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				// ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
				uni.miniProgram.getEnv((res) => {
					console.log(res);
					that.mini = res.miniprogram;
					if (res.miniprogram) {
						that.showDownload = false;
						// 在小程序
					} else {
						// 在微信里
						that.showDownload = false;
					}
				});
			} else {
				// 不在微信里面
				that.showDownload = true;
			}
		},
		onReady() {
			this.canvasW = uni.$u.sys().windowWidth * 0.75;
			this.canvasH = uni.$u.sys().windowHeight * 0.75;
		},
		onUnload() {
			clearInterval(interval);
		},
		methods: {
			getImg() {
				var that = this;
				const webview = webviewJs.webView;
				webview.postMessage({
					data: {
						imgSrc: that.canvasImg
					}
				});
			},
			async createCanvas() {
				uni.showLoading({
					title: '生成中'
				});
				var that = this;
				// 创建画布
				var ctx = uni.createCanvasContext('myCanvas', this);
				var cvsW = uni.getSystemInfoSync().windowWidth;
				var cvsH = uni.getSystemInfoSync().windowHeight;
				var family = "'PingFang SC',tahoma,arial,'helvetica neue','hiragino sans gb','microsoft yahei','sans-serif'";
				// 绘制矩形，参数：cxt、x坐标、y坐标、宽度、高度、圆角、颜色
				_canvas.fillRoundRect(ctx, 0, 0, cvsW, cvsH, 0, "#FFFFFF");
				// 同步加载图片
				var avatar = await _canvas.getImageInfo(that.dataList.status == 101 ? '/static/images/payment_success.png' : '/static/images/refund_success.png');
				// 绘制图片，参数：cxt、图片路径、x坐标、y坐标、宽度、高度
				_canvas.drawCircular(ctx, avatar.path, (cvsW / 2) - 60, 20, 34, 34);
				// 绘文本自定义换行
				ctx.setFillStyle(that.dataList.status == 101 ? '#00C25F' : '#F26809'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: that.dataList.status == 101 ? "支付成功" : "全额退款", //文本
					maxWidth: cvsW, //最大宽度
					maxLine: 1, //最大行数
					x: 0, //x坐标
					y: 20 + ((34 - 14) / 2), //y坐标
					l_h: 14, //行高
					textCenter: true, //是否居中
					cvsW: cvsW, //总宽度
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#333333'); //文字颜色
				ctx.setFontSize(34); //文字大小
				_canvas.dealWords({
					font: "34px", //设置字体
					ctx: ctx,
					word: "¥" + that.dataList.orderMoney, //文本
					maxWidth: cvsW, //最大宽度
					maxLine: 1, //最大行数
					x: 0, //x坐标
					y: 64, //y坐标
					l_h: 34, //行高
					textCenter: true, //是否居中
					cvsW: cvsW - ((34 * (that.dataList.orderMoney.length / 2)) + 17), //总宽度
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#888888'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: "订单状态", //文本
					maxWidth: 76, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 20, //x坐标
					y: 156, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#333333'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: that.dataList.status == 101 ? '支付成功' : that.dataList.status == 105 ? '全额退款' : '', //文本
					maxWidth: 180, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 100, //x坐标
					y: 156, //y坐标
					l_h: 16, //行高
				});
				if (uni.$u.test.isEmpty(that.dataList.paymentTime) === false) {
					// 绘文本自定义换行
					ctx.setFillStyle('#888888'); //文字颜色
					ctx.setFontSize(14); //文字大小
					_canvas.dealWords({
						font: "14px", //设置字体
						ctx: ctx,
						word: "支付时间", //文本
						maxWidth: 76, //最大宽度
						maxLine: 1, //最大行数--超出省略
						x: 20, //x坐标
						y: 190, //y坐标
						l_h: 16, //行高
					});
					// 绘文本自定义换行
					ctx.setFillStyle('#333333'); //文字颜色
					ctx.setFontSize(14); //文字大小
					_canvas.dealWords({
						font: "14px", //设置字体
						ctx: ctx,
						word: that.dataList.paymentTime, //文本
						maxWidth: 180, //最大宽度
						maxLine: 1, //最大行数--超出省略
						x: 100, //x坐标
						y: 190, //y坐标
						l_h: 16, //行高
					});
				} else {
					// 绘文本自定义换行
					ctx.setFillStyle('#888888'); //文字颜色
					ctx.setFontSize(14); //文字大小
					_canvas.dealWords({
						font: "14px", //设置字体
						ctx: ctx,
						word: "退款时间", //文本
						maxWidth: 76, //最大宽度
						maxLine: 1, //最大行数--超出省略
						x: 20, //x坐标
						y: 190, //y坐标
						l_h: 16, //行高
					});
					// 绘文本自定义换行
					ctx.setFillStyle('#333333'); //文字颜色
					ctx.setFontSize(14); //文字大小
					_canvas.dealWords({
						font: "14px", //设置字体
						ctx: ctx,
						word: that.dataList.refundTime, //文本
						maxWidth: 180, //最大宽度
						maxLine: 1, //最大行数--超出省略
						x: 100, //x坐标
						y: 190, //y坐标
						l_h: 16, //行高
					});
				}
				// 绘文本自定义换行
				ctx.setFillStyle('#888888'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: "收款方式", //文本
					maxWidth: 76, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 20, //x坐标
					y: 224, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#333333'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: that.dataList.paymentMethod == 100 ? '聚合订单码' : that.dataList.paymentMethod == 101 ? '银行转账支付' : that.dataList.paymentMethod == 103 ? '博美祺POS' : '', //文本
					maxWidth: 180, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 100, //x坐标
					y: 224, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#888888'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: "订单编号", //文本
					maxWidth: 76, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 20, //x坐标
					y: 258, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#333333'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: that.dataList.orderNo, //文本
					maxWidth: 180, //最大宽度
					maxLine: 2, //最大行数--超出省略
					x: 100, //x坐标
					y: 258, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#888888'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: that.dataList.paymentMethod == 103 ? "参考号" : "渠道单号", //文本
					maxWidth: 76, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 20, //x坐标
					y: that.dataList.orderNo.length > 30 ? 292 + 16 : 292, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#333333'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: that.dataList.paymentMethod == 103 ? that.dataList.referenceId : that.dataList.channelReceiptNo, //文本
					maxWidth: 180, //最大宽度
					maxLine: 2, //最大行数--超出省略
					x: 100, //x坐标
					y: that.dataList.orderNo.length > 30 ? 292 + 16 : 292, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#888888'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: "收款商户", //文本
					maxWidth: 76, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 20, //x坐标
					y: that.countPX() + 326, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#333333'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: that.dataList.merchantName, //文本
					maxWidth: 180, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 100, //x坐标
					y: that.countPX() + 326, //y坐标
					l_h: 16, //行高
				});
				//参数：cxt、x坐标、y坐标、宽度、高度、圆角、颜色
				_canvas.fillRoundRect(ctx, 20, that.countPX() + 364, cvsW - 40, 1, 0, "#DDDDDD");
				// 绘文本自定义换行
				ctx.setFillStyle('#888888'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: "收款类型", //文本
					maxWidth: 76, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 20, //x坐标
					y: that.countPX() + 380, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#333333'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: that.dataList.type == 101 ? '收顾客款' : '收店家款', //文本
					maxWidth: 180, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 100, //x坐标
					y: that.countPX() + 380, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#888888'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: "活动名称", //文本
					maxWidth: 76, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 20, //x坐标
					y: that.countPX() + 414, //y坐标
					l_h: 16, //行高
				});
				// 绘文本自定义换行
				ctx.setFillStyle('#333333'); //文字颜色
				ctx.setFontSize(14); //文字大小
				_canvas.dealWords({
					font: "14px", //设置字体
					ctx: ctx,
					word: that.dataList.storeName, //文本
					maxWidth: 180, //最大宽度
					maxLine: 1, //最大行数--超出省略
					x: 100, //x坐标
					y: that.countPX() + 414, //y坐标
					l_h: 16, //行高
				});
				if (uni.$u.test.isEmpty(that.dataList.customerName) === false) {
					// 绘文本自定义换行
					ctx.setFillStyle('#888888'); //文字颜色
					ctx.setFontSize(14); //文字大小
					_canvas.dealWords({
						font: "14px", //设置字体
						ctx: ctx,
						word: "顾客名称", //文本
						maxWidth: 76, //最大宽度
						maxLine: 1, //最大行数--超出省略
						x: 20, //x坐标
						y: that.countPX() + 448, //y坐标
						l_h: 16, //行高
					});
					// 绘文本自定义换行
					ctx.setFillStyle('#333333'); //文字颜色
					ctx.setFontSize(14); //文字大小
					_canvas.dealWords({
						font: "14px", //设置字体
						ctx: ctx,
						word: that.dataList.customerName, //文本
						maxWidth: 180, //最大宽度
						maxLine: 1, //最大行数--超出省略
						x: 100, //x坐标
						y: that.countPX() + 448, //y坐标
						l_h: 16, //行高
					});
				}
				// 执行绘制
				ctx.draw(false, function() {
					uni.canvasToTempFilePath({
						width: cvsW,
						height: cvsH,
						canvasId: 'myCanvas',
						success(res) {
							that.canvasImg = res.tempFilePath;
							that.onSaveImg();
							uni.hideLoading();
						}
					}, that);
				}, 500);
			},
			// 保存图片
			async onSaveImg() {
				var that = this;
				let imgUrl = '';
				if (that.canvasImg) {
					imgUrl = await that.canvasImg;
					// saveImg(imgUrl);
					that.canvasImgOpen();
					uni.$u.toast('长按图片保存到相册');
				}
			},
			// 计算订单号换行后增加的px
			countPX() {
				var that = this;
				let limit = 30;
				let fontSize = 16;
				return that.dataList.orderNo.length > limit && that.dataList.channelReceiptNo.length > limit ? fontSize + fontSize : that.dataList.orderNo.length > limit ? fontSize : 0;
			},
			// 获取数据
			getData() {
				let that = this;
				let params = {
					token: that.vuex_token,
					orderNo: that.orderNo
				}
				getOrderDetail(params).then(res => {
					that.dataList = res.data;
					if (res.data.status == 105) {
						uni.hideLoading();
						clearInterval(interval);
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.getData();
					}
				}).catch(err => {
					console.log('getOrderDetail=', err);
				});
			},
			// 保存图片弹窗打开
			canvasImgOpen() {
				this.canvasImgShow = true;
			},
			// 保存图片弹窗取消
			canvasImgClose() {
				this.canvasImgShow = false;
			},
			// 确认退款弹窗打开
			confirmInfoOpen() {
				this.confirmInfoShow = true;
			},
			// 确认退款弹框取消
			confirmInfoClose() {
				this.confirmInfoShow = false;
			},
			// 确认退款弹框确认
			confirm() {
				let that = this;
				let params = {
					token: that.vuex_token,
					orderNo: that.orderNo
				};
				checkOrderIsRefund(params).then(res => {
					that.confirmInfoClose();
					if (res.code == 200) {
						if (res.data.isRefund) {
							uni.showLoading({
								title: '退款中'
							});
							that.toRefund(); //有退款记录
						} else {
							uni.$u.toast(res.msg); //无退款记录发起退款
						}
					} else {
						uni.hideLoading();
						uni.$u.toast(res.msg);
					}
				})
			},
			// 发起退款
			toRefund() {
				let that = this;
				let params = {
					token: that.vuex_token,
					orderNo: that.orderNo
				};
				initiateRefund(params).then(res => {
					interval = setInterval(() => {
						that.getData();
					}, 1500);
				}).catch(err => {
					console.log('initiateRefund=', err);
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;

		.container {
			position: relative;
			height: 100vh;
			padding-top: 1rpx;
			box-sizing: border-box;

			.fan_canvas {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				z-index: -1;
				width: 100vw;
				height: 100vh;
				background-color: #FFFFFF;
			}

			.payment_status {
				margin: 40rpx auto 0;

				.status {

					font-size: 28rpx;
					line-height: 32rpx;
					color: #00C25F;
					margin-left: 6rpx;
				}

				.status_refund {
					color: #F26809;
				}
			}

			.payment_money {
				margin: 32rpx auto 0;
				text-align: center;

				.symbol {

					font-size: 52rpx;
					line-height: 66rpx;
					color: #333333;
				}

				.rmb {

					font-size: 68rpx;
					color: #333333;
					line-height: 72rpx;
					margin-left: 13rpx;
				}
			}

			.payment_list {
				margin: 112rpx 40rpx 0;
				border-bottom: 1rpx solid #DDDDDD;

				.list {
					margin-bottom: 36rpx;

					.list_label {
						width: 152rpx;
						font-size: 28rpx;
						color: #888888;
						line-height: 32rpx;
						text-align: right;
						word-break: keep-all;
						padding-right: 40rpx;
						box-sizing: border-box;
					}

					.list_text {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						word-break: break-all;
					}
				}
			}

			.collection {
				margin: 36rpx 40rpx 0;
				border-bottom: none;
			}

			.collection_complete {
				border-bottom: none;
			}

			.details_btn {
				height: 88rpx;
				margin-top: 60rpx;
			}

			.save_album {
				display: inline-block;

				font-size: 28rpx;
				color: #888888;
				line-height: 32rpx;
				margin: 40rpx auto 0;
			}

			.confirm_info {
				width: 560rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.confirm_content {
					padding: 46rpx 46rpx 0;
					text-align: center;

					.info_title {

						font-size: 34rpx;
						color: #333333;
						line-height: 38rpx;
						margin: 0rpx 8rpx;
					}

					.tips {
						max-width: 480rpx;

						font-size: 26rpx;
						color: #888888;
						line-height: 40rpx;
						margin: 18rpx 0 48rpx;
					}
				}

				u-button {}
			}
		}
	}
</style>